<template>
  <div class="name-block" ref="nameBlock">
    <h3> {{ title }} </h3>
    <test-2 :name="name" :age="13" @handle="handleClick"></test-2>
    <slot v-slot:footer>
      <p>Copyright 2016 Evan You</p>
    </slot>
    <div ref="nameDiv"> this is a demo</div>
  </div>
</template>

<script>
import Test2 from './test2.vue'

export default {
  customProps: "这是自定义的一个属性",
  data () {
    return {
      title: "$data——实例的属性",
      name: 'This is goods'
    }
  },
  created () {
    console.log(this.$data.title, this.title)
    console.log(this.$options.customProps)
    console.log(this.$parent)
    console.log(this.$root)
    console.log(this.$children)
    // console.log(this.$slot)
  },
  mounted () {
    this.$el.addEventListener('click', this.handleClick)
    console.log(this.$refs.nameBlock)
    console.log(this.$isServer)
    console.log(this.$attrs)
  },
  methods: {
    handleClick () {
      alert("$el触发dom")
    }
  },
  components: {
    Test2,
  }
}
</script>

<style lang="stylus" scoped>

</style>

